<template>
  <div>
    <!--准备一个节点  -->
    <div ref="echart" style="width: 400px; height: 300px"></div> 
  </div>
</template>

<script>
// 导入核心包
import * as echarts from "echarts";
// 获取一个渲染图标的dom节点 -》vue获取dom节点 ref + this.$refs.echart
// 把echart 渲染到准备好的dom节点中 ->  vue中如何保证一个dom已经可以使用？钩子函数 mounted

// 让组件定制化 父传子传递参数 达到一个复用的目的 很多地方都有可能用到雷达图
// 设计props 在实际开发的过程中 有很多很多的业务参数都有可能会被定制 只要是需要被定制的都可以进行props抽离

// 如果传入的参数 不断发生变化 如何让图表不断地使用最新的参数重新渲染?
//1. 寻找一个可以进行更新图片的函数方法 setOption

//2.watch一下props参数 一变化就更新图表

// 核心点：this共享数据  共享echart实例对象 共享了option参数


export default {
  name: "Radar",
  props: {
    indicator: {
      type: Array,
      default: () => { 
        return [];
      },
    },
  },
  data() {
    return {
      num: 0
    }
  },
  watch: {
    indicator() {
      console.log('数据参数变化了');
      // // 使用最新的参数刷新图表 这里要调用实例方法 但是实例在另外一个函数中生成 无法直接共享 怎么办？
      // data  实例放到外头  直接挂载到this上  
      // vue data 初始化的性能问题
      // data 中的数据只要方法进去不管数据桥套层次多深 都会进行递归响应式处理
      // data 它的作用就是放置响应式数据的
      // echart实例对象很大 options参数很多 而且这里的刷新图表式独立于 vue 响应式的存在 不需要响应式
      // 如果放进去那就是一种浪费

      // mounted 中往this上挂就没事呢 执行时机的问题 响应式处理时发生在data中 mounted执行的时候 响应式数据早就结束了
      // 所以这里用this挂载 既可以保证多个配置中可以共享数据 并且还不存在响应式性能开销
      console.log(this.myChart);
      this.myChart.setOption({
        ...this.option,
        radar: {
          shape: "circle",
          indicator: this.indicator,
        },
      })
    },
  },
  mounted() {
    this.echartInit();
  },
  methods: {
    // 初始化
    echartInit() {
      this.myChart = echarts.init(this.$refs.echart);
      this.option = {
        title: {
          // text: "Basic Radar Chart",
        },
        // legend: {
        //   data: ["Allocated Budget", "Actual Spending"],
        // },
        radar: {
          shape: "circle",
          indicator: this.indicator,
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: "Allocated Budget",
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: "Actual Spending",
              },
            ],
          },
        ],
      };
      // 把配置项数据渲染到我们已经准备好的图标实例中
      this.option && this.myChart.setOption(this.option);
    },
  },
};
</script>
<style>
</style>